<template>
  <div :class="menuclose?`view-index close`:`view-index`">
    <a href="#" @click="menuclose=!menuclose" :class="menuclose?`menucontrol close`:`menucontrol`" style="display:none"></a>
    <Menu class="appmenu" />
    <div class="appright">
      <Top />
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Menu from "../components/Menu.vue";
import Top from "../components/Top.vue";
export default {
  components: {
    Menu,
    Top
  },
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      menuclose: false
    };
  }
};
</script>

<style lang="scss">
.view-index {
  position: relative;
  .appmenu {
    transition: all 0.5s;
  }
  &.close {
    .appmenu {
      width: 67px;
      overflow: hidden;
    }
    .appright {
      margin-left: 67px;
    }
    .commenu > ul > li > ul {
      margin-left: 100px;
    }
    .commenu > ul > li {
      height: 54px !important;
    }
  }
}

.menucontrol {
  background: url(../assets/m1.png) no-repeat center center;
  background-size: 100% 100%;
  width: 12px;
  height: 16px;
  position: absolute;
  left: 170px;
  top: 9px;
  z-index: 9999;
  transition: all 0.5s;
  &.close {
    background-image: url(../assets//m2.png);
    left: 66px;
  }
}
</style>
